<template>
    <!-- 车牌组件 -->
    <view class="plate-content">
		<view class="marker" v-show="plateShow" @click="close"></view>
        <view class="plate-popup" v-show="plateShow">
			
            <!-- 关闭 -->
            <!-- <view class="plate-close" v-show="plateNumber.length===8 || plateNumber.length===7" @click="close">关闭</view> -->
			<view class="top-wrap">
				<input contenteditable="true" class="input" ref="plateNumberInput" @click="preventDefault"  v-model="plateNumber" style="width: 300rpx;" @input="refresh" placeholder="请输入或长按粘贴" type="text">
				 <view class="plate-close" @click="close">关闭</view>
			</view>
            <view v-show="!plateNumber">
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle1" @click="plateHead(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle2" @click="plateHead(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle3"  @click="plateHead(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle4"  @click="plateHead(item)">{{item}}</view>
                    <!-- 删除 -->
                    <view class="plate-popup-item-list del" @click="plateDel">
                        <image :src="src" />
                    </view>
                </view>
            </view>

            <view v-show="plateNumber">
                <view class="plate-popup-item">
                    <!-- 数字选择 -->
                    <view class="plate-popup-item-list" :class="(plateNumber.length<2 || isInputZh)?'':''" v-for="(item,itemIndex) in keyNumber" @click="plateNum(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" :class="!isInputZh?'':''" v-for="(item,itemIndex) in keyEnInput1" @click="plateInput(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" :class="!isInputZh?'':''" v-for="(item,itemIndex) in keyEnInput2" @click="plateInput(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" :class="!isInputZh?'':''" v-for="(item,itemIndex) in keyEnInput3" @click="plateInput(item)">{{item}}</view>
                    <!-- 车牌最后一位-->
                    <view class="plate-popup-item-list" :class="(plateNumber.length===6 || plateNumber.length===7) &&!isInputZh?'':''" v-for="(item,itemIndex) in keyEnInput4" @click="plateLast(item)">{{item}}</view>
                    <!-- 删除 -->
                    <view class="plate-popup-item-list del" @click="plateDel">
                        <image :src="src" />
                    </view>
                </view>
            </view>
        </view>
        <!-- <button class="btn" type="button" @click="show" data-position="bottom">底部弹出 popup</button> -->

    </view>
</template>

<script>
	import plateDel from './plate-del.png'
    export default {
        data() {
            return {
				plateNumber:'',//输入的车牌
                plateShow: false, //车牌选择是否打开
                keyVehicle1: ['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
                keyVehicle2: ['皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘'],
                keyVehicle3: ['晋', '蒙', '陕', '吉', '闽', '贵', '渝', '川'],
                keyVehicle4: ['青', '藏', '琼', '宁', '使'],
                keyNumber: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
                keyEnInput1: ["Q", "W", "E", "R", "T", "Y", "U", "P", "A", "S"],
                keyEnInput2: ["D", "F", "G", "H", "J", "K", "L", "Z", "X", "C"],
                keyEnInput3: ["V", "B", "N", "M"],
                keyEnInput4: ["港", "澳", "学"],
                isInputZh: false, //是否输入了特殊字符
                src: ''
            };
        },
        mounted() {
            this.src = plateDel;
			// this.$refs.plateNumberInput.$el.focus()
        },
        onShow() {
			
		},
        methods: {
			refresh() {
				this.$emit('input', this.plateNumber);
			},
			preventDefault(event) {
				console.log(event);
				 event.preventDefault();
				 event.stopPropagation()
				 uni.hideKeyboard()
			},
            /**
             * @desc 初始化
             */
            init() {
                this.plateNumber = '';
            },
            /**
             * @desc 打开下拉栏
             */
            show(carNo) {
				if(carNo) {
					this.plateNumber = carNo
				}
                this.plateShow = true;
				//传值到父组件
				this.$emit('showOrHide', true);
				this.$forceUpdate()
            },
            /**
             * @desc 关闭弹出的车牌
             */
            close() {
				this.plateNumber = ''
                this.plateShow = false;
				//传值到父组件
				this.$emit('showOrHide', false);
            },
            /**
             * @desc 首字母选择
             */
            plateHead(plate) {
                if (!this.plateNumber) {
                    this.plateNumber = this.plateNumber + plate;
                    //与父组件双向绑定，传值到父组件
                    this.$emit('input', this.plateNumber);
                }
            },
            /**
             * @desc 字母选择
             */
            plateInput(plate) {
                //判断是否输入了字母
                /* if (this.isInputZh) {
                    return;
                } */
                if (this.plateNumber.length < 8) {
					console.log(this.plateNumber.length)
					console.log(this.plateNumber)
                    this.plateNumber = this.plateNumber + plate;
                    //与父组件双向绑定，传值到父组件
                    this.$emit('input', this.plateNumber);
                }
            },
            /**
             * @desc 数字选择
             */
            plateNum(plate) {
                //判断是否输入了字母
                /* if (this.isInputZh) {
                    return;
                } */
                if (this.plateNumber.length >= 2 && this.plateNumber.length < 8) {
                    this.plateNumber = this.plateNumber + plate;
                    //与父组件双向绑定，传值到父组件
                    this.$emit('input', this.plateNumber);
                }
            },
            /**
             * @desc 最后一位选择
             */
            plateLast(plate) {
                //判断是否输入了字母
                /* if (this.isInputZh) {
                    return;
                } */
                if (this.plateNumber.length === 6 || this.plateNumber.length === 7) {
                    this.plateNumber = this.plateNumber + plate;
                    this.isInputZh = true;
                    //与父组件双向绑定，传值到父组件
                    this.$emit('input', this.plateNumber);
                }
            },
            /**
             * @desc 删除
             */
            plateDel() {
                if (this.plateNumber) {
                    this.plateNumber = this.plateNumber.substring(0, this.plateNumber.length - 1);
                }

                if (this.plateNumber.length === 6 || this.plateNumber.length === 7) {
                    this.isInputZh = false;
                }
                //与父组件双向绑定，传值到父组件
                this.$emit('input', this.plateNumber);
            }
        }
    }
</script>

<style lang="scss">
    @import "./plateNumber.scss";
	.top-wrap {
		display: flex;
		align-items: center;
		padding-top: 10rpx;
		
		.input {
			flex: 1;
			background: #fff;
			height: 90rpx;
			text-align: left;
			padding: 0 30rpx;
		}
	}
</style>
